<template >
  <div class="top2">
    <el-row>
      <div id="top3">
        <div id="topCollect" class="top3top">
          <el-col :xs="24" :sm="8" v-for="(v,k) in cars " :key="k">
            <transition enter-active-class="animated fadeInRight">
              <div v-if="show==true" class="toptop" @click="carId=k+1,getCarId()">
                <div class="topImage">
                  <img :src="getpic(v.carPic1)" width="80%" height="100%" />
                  <div class="topPrice">
                    <span>{{v.price}}/天</span>
                  </div>
                </div>
                <div class="topName">{{v.carName}}</div>
              </div>
            </transition>
          </el-col>
        </div>
      </div>
    </el-row>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      cars: [],
      carId: "",
      cardetail: [],
      show: "",
      top: 700
    };
  },
  created() {
    this.$axios
      .get("http://localhost:3000/ShowTopSales")
      .then(res => {
        console.log("查询结果：", res.data.data);
        this.cars = res.data.data;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
  },
  methods: {
    getpic(pic) {
      console.log("ha", pic);
      let path = "http://localhost:3000/upload/" + pic;
      console.log("图片", path);
      return path;
    },
    getCarId: function() {
      this.$router.push({ name: "cardetail", query: { carId: this.carId } });
    },
    handleScroll() {
      var top = document.documentElement.scrollTop;
      if (top >= this.top) {
        this.show = true;
      }
    }
  }
};
</script>
<style>
.top2 {
  margin: 0 auto;
  width: 100%;
}
</style>
